<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <th:block th:include="include :: header('初始多表格')"/>
</head>
<body class="gray-bg">
<div class="container-div">
  <!-- 主工作区 -->
  <div class="row">
    <div class="col-sm-12">
      <div class="row">
        <!-- 搜索区 -->
        <div class="col-sm-12 search-collapse">
          <form id="grid-typemapping-search">
            <div class="select-list">
              <ul>
                <li>
                  <label>字段类型: </label>
                  <input type="text" name="columnType"/>
                </li>
                <li>
                  <a class="btn btn-primary btn-rounded btn-sm"
                     onclick="$.table.search('grid-typemapping-search', 'grid-typemapping-table')"><i
                      class="fa fa-search"></i>&nbsp;搜索</a>
                  <a class="btn btn-warning btn-rounded btn-sm"
                     onclick="$.form.reset('grid-typemapping-search', 'grid-typemapping-table')"><i
                      class="fa fa-refresh"></i>&nbsp;重置</a>
                </li>
              </ul>
            </div>
          </form>
        </div>
        <!-- 工具区 -->
        <div class="btn-group-sm" id="grid-typemapping-toolbar" role="group">
          <a class="btn btn-success" onclick="$.operate.add()">
            <i class="fa fa-plus"></i> 新增
          </a>
          <a class="btn btn-primary single disabled" onclick="$.operate.edit()">
            <i class="fa fa-edit"></i> 修改
          </a>
          <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()">
            <i class="fa fa-remove"></i> 删除
          </a>
        </div>
        <!-- 列表区 -->
        <div class="col-xs-12 select-table table-striped">
          <table id="grid-typemapping-table"></table>
        </div>
      </div>
    </div>
  </div>
</div>

<div th:include="include :: footer"></div>
<div th:include="include :: bizdk"></div>
</body>
<script th:inline="javascript">
		var prefix = ctx + "gen/template";

		$(function() {
				var options = {
					id: "grid-typemapping-table",
					formId: "grid-typemapping-search",
					toolbar: "grid-typemapping-toolbar",
					url: prefix + "/page",
					createUrl: prefix + "/add",
					removeUrl: prefix + "/delete",
					updateUrl: prefix + "/edit/{id}",
					modalName: "类型映射",
					uniqueId: "id",
					responseHandler: bizdk.pageResponseHandler,
							columns: [{
							checkbox: true
					},
					{
							field : 'id',
							title : 'ID'
					},
					{
							field : 'name',
							title : '模板名称'
					},
					{
							field : 'createTime',
							title : '创建时间'
					},
					{
							title: '操作',
							width: '150px',
							align: 'center',
							formatter: function(value, row, index) {
									var actions = [];
									actions.push('<a class="btn btn-success btn-xs" href="###" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
									actions.push('<a class="btn btn-danger btn-xs" href="###" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
									return actions.join('');
							}
					}]
				};
				$.table.init(options);
		});

</script>
</html>